<script setup lang="ts">
import { getMyCouponsApi } from '@/services/home'
import { getAllFavoriteDevicesApi } from '@/services/my'
import { getBalanceApi } from '@/services/wallet'
import { useMemberStore, useLocationStore } from '@/stores'
import { PageSkip } from '@/utils/tools'
import { onShow } from '@dcloudio/uni-app'
import { reactive, inject } from 'vue'
const { loginPromise } = <{ loginPromise: Promise<unknown> }>inject('globalData')
const locationStore = useLocationStore()

onShow(() => {
  if (!memberStore.token) return
  loginPromise.then(() => {
    getAllFavoriteDevices()
  })
  getMyCouponsLength()
  getBalance()
  // getUserDetails()
})

/**
 * 获取收藏设备列表
 */
const getAllFavoriteDevices = async () => {
  const res: any = await getAllFavoriteDevicesApi({
    clientId: memberStore.userInfo!.id,
    longitude: locationStore.location!.longitude,
    latitude: locationStore.location!.latitude,
  })
  list[2].number = res.data.length || 0
  console.log(res)
}
/** 获取优惠券列表长度 */
const getMyCouponsLength = async () => {
  const res = await getMyCouponsApi({
    status: 1,
    clientId: memberStore.userInfo?.id,
    pageNum: 1,
    pageSize: 99999,
  })
  console.log(res)
  list[1].number = res.data.rows.length || 0
}
// /** 获取用户详情 */
// const getUserDetails = async () => {
//   const res = await getUserDetailsApi()
//   console.log(res)
//   list[1].number = res.data.integral || 0
// }

// 获取用户钱包余额
const getBalance = async () => {
  const res = await getBalanceApi()
  list[0].number = res.data.totalBalance || '0.00'
  memberStore.setBalanceInfo(res.data)
}
// 循环渲染
const list = reactive([
  {
    text: '余额',
    url: '/pagesWallet/wallet/wallet',
    number: '0.00',
    icon: '/static/images/my/icon_2.png',
  },
  {
    text: '优惠券',
    url: '/pagesMy/userCoupon/userCoupon',
    number: 0,
    icon: '/static/images/my/icon_2.png',
  },
  {
    text: '设备收藏',
    url: '/pagesMy/getAllDevices/getAllDevices',
    number: 0,
    icon: '/static/images/my/icon_1.png',
  },
])
const memberStore = useMemberStore()
/**
 *
 * @param skipPageFn 点击前判断用户是否登录
 */
const skipPageFn = (url: string) => {
  if (memberStore.token && url) {
    PageSkip(url)
  } else {
    emit('open')
  }
}
const emit = defineEmits<{
  (e: 'open'): void
}>()
</script>

<template>
  <view class="userWelfare">
    <view class="coupon" @tap="skipPageFn(item.url)" v-for="(item, index) in list" :key="item.url">
      <image class="couponImage" :src="item.icon" mode="aspectFit" />
      <view class="couponInfo">
        <text>{{ item.text }}</text>
        <text class="couponData">{{ item.number }}</text>
      </view>
      <view class="line" v-if="index != list.length - 1"></view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.userWelfare {
  display: flex;
  justify-content: space-around;
  transform: translateY(-60rpx);
  width: 702rpx;
  height: 200rpx;
  background-color: #fff;
  margin: 0 24rpx;
  border-radius: 20rpx;
  padding: 0 20rpx;
  box-shadow: 0px 2rpx 12rpx 2rpx rgba(0, 0, 0, 0.1);
  .coupon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
    position: relative;
    .line {
      width: 2rpx;
      height: 90rpx;
      background-color: #e5e5e5;
      position: absolute;
      right: 0;
    }
    .couponImage {
      width: 52rpx;
      height: 52rpx;
      margin-bottom: 20rpx;
    }
    .couponInfo {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      font-size: 30rpx;
    }
    .couponData {
      margin-left: 20rpx;
    }
  }
}
</style>
